<template>
  <section class="main">
    <input
      id="toggle-all"
      :checked="isAllDone"
      class="toggle-all"
      type="checkbox"
      @change="changeAllChecked(!isAllDone)"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- :class="{ completed: item.done }" -->
      <li
        class="todo"
        :class="{ completed: item.done }"
        v-for="(item, index) in todoList"
        :key="item.id"
      >
        <div @dblclick="changeIsEdit(index)" v-show="!item.isEdit">
          <input
            class="toggle"
            type="checkbox"
            @change="changeTodoStatus(index, $event)"
            :checked="item.done"
          />
          <label>{{ item.text }}</label>
          <button class="destroy" @click="delTodo(index)"></button>
        </div>
        <input
          @keyup.enter="endEdit(index, $event)"
          @blur="endEdit(index, $event)"
          :value="item.text"
          v-show="item.isEdit"
          class="edit"
          type="text"
        />
      </li>
    </ul>
  </section>
</template>

<script setup>
let props = defineProps({
  todoList: {
    type: Array,
    default: [],
  },
  isAllDone: {
    type: Boolean,
    default: false,
  },
});

let emit = defineEmits(["delTodo", "changeTodoStatus", "changeIsEdit","endTodo"]);
let delTodo = (idx) => {
  emit("delTodo", idx);
};

let changeTodoStatus = (idx, e) => {
  emit("changeTodoStatus", idx, e.target.checked);
};

let changeAllChecked = (flag) => {
  emit("changeAllChecked", flag);
};

let changeIsEdit = (idx) => {
  emit("changeIsEdit", idx);
};

let endEdit = (idx, e) => {
  emit("endTodo", idx,e.target.value);
}
</script>